<template>
  <page-header-wrapper>
    <a-card>
      <JeepaySearchForm :searchConditionNum="6" :searchFunc="queryFunc" :resetFunc="onReset">
        <a-form-item label="" class="table-search-item">
          <JeepayDateRangePicker ref="dateRangePicker" v-model:value="vdata.searchData['queryDateRange']" customDateRangeType="dateTime" />
        </a-form-item>
        <jeepay-text-up v-model:value="vdata.searchData.orderId" :placeholder="'订单ID'" />
        <jeepay-text-up v-model:value="vdata.searchData.mchOrderNo" :placeholder="'商户订单号'" />
        <JeepaySearchInfoInput v-model:value="vdata.searchData['mchNo']" placeholder="商户号" :textUpStyle="true" :mchNoAndName="true" showType="MCH" />

        <jeepay-text-up v-model:value="vdata.searchData.isvNo" :placeholder="'服务商号'" />
        <jeepay-text-up v-model:value="vdata.searchData.appId" :placeholder="'应用AppId'" />
        <a-form-item label="" class="table-search-item">
          <a-select v-model:value="vdata.searchData.state" placeholder="通知状态">
            <a-select-option value="">全部</a-select-option>
            <a-select-option value="1">通知中</a-select-option>
            <a-select-option value="2">通知成功</a-select-option>
            <a-select-option value="3">通知失败</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="" class="table-search-item">
          <a-select v-model:value="vdata.searchData.orderType" placeholder="订单类型">
            <a-select-option value="">全部</a-select-option>
            <a-select-option value="1">支付</a-select-option>
            <a-select-option value="2">退款</a-select-option>
            <a-select-option value="3">转账</a-select-option>
          </a-select>
        </a-form-item>
      </JeepaySearchForm>

      <!-- 列表渲染 -->
      <JeepayTable
        ref="infoTable"
        :closable="true"
        :initData="true"
        :reqTableDataFunc="reqTableDataFunc"
        :tableColumns="tableColumns"
        :searchData="vdata.searchData"
        rowKey="orderId"
        @btnLoadClose="vdata.btnLoading=false"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'state'">
            <a-tag
              :key="record.state"
              :color="record.state === 1?'orange':record.state === 2?'green':'volcano'"
            >
              {{ record.state === 1?'通知中':record.state === 2?'通知成功':record.state === 3?'通知失败':'未知' }}
            </a-tag>
          </template>

          <template v-if="column.key === 'notifyPostType'">
            <a-tag v-if="record.notifyPostType == 'POST_QUERYSTRING'" color="orange">POST(QueryString 形式)</a-tag>
            <a-tag v-if="record.notifyPostType == 'POST_BODY'" color="green">POST(Body 形式)</a-tag>
            <a-tag v-if="record.notifyPostType == 'POST_JSON'" color="volcano">POST(JSON 形式)</a-tag>
          </template>

          <template v-if="column.key === 'orderType'">
            <a-tag
              :key="record.orderType"
              :color="record.orderType === 1?'green':record.orderType === 2?'volcano': record.orderType === 3? 'blue': 'orange'"
            >
              {{ record.orderType === 1?'支付':record.orderType === 2?'退款':record.orderType === 3? '转账':'未知' }}
            </a-tag>
          </template>

          <template v-if="column.key === 'op'">
            <!-- 操作列插槽 -->
            <JeepayTableColumns>
              <a-button v-if="$access('ENT_MCH_NOTIFY_VIEW')" type="link" @click="detailFunc(record.notifyId)">详情</a-button>
              <a-button v-if="$access('ENT_MCH_NOTIFY_RESEND') && record.state === 3" type="link" @click="resendFunc(record.notifyId)">重发通知</a-button>
            </JeepayTableColumns>
          </template>
        </template>  
      </JeepayTable>
    </a-card>
    <!-- 日志详情抽屉 -->
    <template>
      <a-drawer
        width="40%"
        placement="right"
        :closable="true"
        :visible="vdata.visible"
        :title="vdata.visible === true? '商户通知详情':''"
        @close="onClose"
      >
        <a-row justify="space-between" type="flex">
          <a-col :sm="12">
            <a-descriptions>
              <a-descriptions-item label="订单ID">
                <a-tag color="purple">
                  {{ vdata.detailData.orderId }}
                </a-tag>
              </a-descriptions-item>
            </a-descriptions>
          </a-col>
          <a-col :sm="12">
            <a-descriptions>
              <a-descriptions-item label="服务商号">
                {{ vdata.detailData.isvNo }}
              </a-descriptions-item>
            </a-descriptions>
          </a-col>
          <a-col :sm="12">
            <a-descriptions>
              <a-descriptions-item label="商户订单号">
                {{ vdata.detailData.mchOrderNo }}
              </a-descriptions-item>
            </a-descriptions>
          </a-col>
          <a-col :sm="12">
            <a-descriptions>
              <a-descriptions-item label="商户号">
                {{ vdata.detailData.mchNo }}
              </a-descriptions-item>
            </a-descriptions>
          </a-col>
          <a-col :sm="12">
            <a-descriptions>
              <a-descriptions-item label="订单类型">
                <a-tag :color="vdata.detailData.orderType === 1?'green':vdata.detailData.orderType === 2?'volcano': vdata.detailData.orderType === 3? 'blue' : 'orange'">
                  {{ vdata.detailData.orderType === 1?'支付':vdata.detailData.orderType === 2?'退款':vdata.detailData.orderType === 3 ? '转账': '未知' }}
                </a-tag>
              </a-descriptions-item>
            </a-descriptions>
          </a-col>
          <a-col :sm="12">
            <a-descriptions>
              <a-descriptions-item label="应用APPID">
                {{ vdata.detailData.appId }}
              </a-descriptions-item>
            </a-descriptions>
          </a-col>
          <a-col :sm="12">
            <a-descriptions>
              <a-descriptions-item label="通知状态">
                <a-tag :color="vdata.detailData.state === 1?'orange':vdata.detailData.state === 2?'green':'volcano'">
                  {{ vdata.detailData.state === 1?'通知中':vdata.detailData.state === 2?'通知成功':vdata.detailData.state === 3?'通知失败':'未知' }}
                </a-tag>
              </a-descriptions-item>
            </a-descriptions>
          </a-col>
          <a-col :sm="12">
            <a-descriptions>
              <a-descriptions-item label="通知次数">
                {{ vdata.detailData.notifyCount }}
              </a-descriptions-item>
            </a-descriptions>
          </a-col>
          <a-col :sm="12">
            <a-descriptions>
              <a-descriptions-item label="HTTP发送方式">
                <a-tag v-if="vdata.detailData.notifyPostType == 'POST_QUERYSTRING'" color="orange">POST(QueryString 形式)</a-tag>
                <a-tag v-if="vdata.detailData.notifyPostType == 'POST_BODY'" color="green">POST(Body 形式)</a-tag>
                <a-tag v-if="vdata.detailData.notifyPostType == 'POST_JSON'" color="volcano">POST(JSON 形式)</a-tag>
              </a-descriptions-item>
            </a-descriptions>
          </a-col>
          <a-col :sm="24">
            <a-descriptions>
              <a-descriptions-item label="最后通知时间">
                {{ vdata.detailData.lastNotifyTime }}
              </a-descriptions-item>
            </a-descriptions>
          </a-col>
          <a-col :sm="12">
            <a-descriptions>
              <a-descriptions-item label="创建时间">
                {{ vdata.detailData.createdAt }}
              </a-descriptions-item>
            </a-descriptions>
          </a-col>
          <a-col :sm="12">
            <a-descriptions>
              <a-descriptions-item label="更新时间">
                {{ vdata.detailData.updatedAt }}
              </a-descriptions-item>
            </a-descriptions>
          </a-col>
          <a-col :sm="24">
            <a-form-item label="通知地址">
              <a-textarea
                v-model:value="vdata.detailData.notifyUrl"
                
                disabled="disabled"
                style="height: 100px;color: black"
              />
            </a-form-item>
          </a-col>
          <a-col :sm="24">
            <a-form-item label="响应结果">
              <a-textarea
                v-model:value="vdata.detailData.resResult"
                disabled="disabled"
                style="height: 100px;color: black"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-drawer>
    </template>
  </page-header-wrapper>
</template>
<script setup lang="ts">
import { API_URL_MCH_NOTIFY_LIST, req, $mchNotifyResend } from '@/api/manage'
import { ref, reactive, getCurrentInstance, onMounted } from 'vue'
// 导入全局函数
const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties

// infoTable组件
const infoTable = ref()
const dateRangePicker = ref()

  // eslint-disable-next-line no-unused-vars
  const tableColumns = ref([
    { key: 'orderId', title: '订单ID', fixed: 'left', dataIndex: 'orderId'},
    { key: 'mchOrderNo', title: '商户订单号', dataIndex: 'mchOrderNo' },
    { key: 'state', title: '通知状态' },
    { key: 'orderType', title: '订单类型' },
    { key: 'createdAt', dataIndex: 'createdAt', title: '创建日期' },
    { key: 'op', title: '操作', fixed: 'right', align: 'center' }
  ])

  const vdata = reactive({
        btnLoading: false,
        searchData: {queryDateRange: 'today'} as any,
        selectedIds: [] as any, // 选中的数据
        visible: false,
        detailData: {} as any
  })

    // computed: {
    //   rowSelection () {
    //     const that = this
    //     return {
    //       onChange: (selectedRowKeys, selectedRows) => {
    //         vdata.selectedIds = [] // 清空选中数组
    //         selectedRows.forEach(function (data) { // 赋值选中参数
    //           vdata.selectedIds.push(data.payOrderId)
    //         })
    //       }
    //     }
    //   }
    // },
      function queryFunc () {
        vdata.btnLoading = true
        infoTable.value.refTable(true)
      }
      // 请求table接口数据
      function reqTableDataFunc (params) {
        return req.list(API_URL_MCH_NOTIFY_LIST, params)
      }
      function detailFunc (recordId) {
        req.getById(API_URL_MCH_NOTIFY_LIST, recordId).then(res => {
          vdata.detailData = res
        })
        vdata.visible = true
      }
     function  onClose () {
        vdata.visible = false
      }
      function resendFunc (notifyId) { // 重发通知
        $infoBox.confirmPrimary('确认重发通知？', '', () => {
          $mchNotifyResend(notifyId).then(res => {
            $infoBox.message.success('任务更新成功，请稍后查看最新状态！')
            queryFunc()
          })
        })
      }
      function onReset(){
        //重置搜索内容
        dateRangePicker.value.returnSelectModel()
        vdata.searchData = { queryDateRange: 'today' }
      }
</script>
